<!DOCTYPE html>
<html lang="zh_CN">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .bg {
            background-color: #ccc;

        }

        .bd {
            border: 1px solid #f00;
        }

        .fz30 {
            font-size: 30px;
        }
    </style>
</head>
<body>
<div id="app">
    <p>
        .trim 就是 v-model 的修饰符，可以去除内容的前后的空格
    </p>
    <p>

    </p>
    <form action="">

        搜索关键字： <input type="text" v-model.trim="kw"> <br>

        <!--<input type="submit" @click.prevent="subHandler">-->
        <input type="submit" @click="subHandler">

        <!--
        表单里面的 submit 在做提交的时候，会进行表单的提交，同时页面会刷新，如果我们不希望submit提交的页面刷新（阻止表单的默认行为）

        .prevent 修饰的底层的原理，其实就是调用 event 的 preventDefault();

        https://v2.cn.vuejs.org/v2/api/#v-on


        -->

    </form>


</div>

</body>
<script src="lib/vue/vue.js"></script>

<script type="text/javascript">


    const vm = new Vue({
        el: '#app',
        data: {
            kw: '',
        },
        methods: {

            subHandler(e) {
                // 事件源的  preventDefault 可以阻止表单默认行为

                e.preventDefault();

                console.log('用户输入的内容：', this.kw);
            }
        }
    })

</script>

</html>
